<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p11_定位广告</title>
    <style>
        .top {
            background-color: #5aa4ae;
            height: 120px;
            margin-bottom: 10px;
            position: fixed;
            width: 100vw;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #f35336;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at atque, delectus deserunt earum eos, eum
            eveniet, exercitationem inventore magnam magni minima necessitatibus qui quibusdam voluptas. Accusamus iusto
            nesciunt voluptates.
        </div>
        <div>Accusamus alias aspernatur, assumenda autem cumque dicta distinctio doloremque ducimus eius eos expedita,
            fugiat iure minima nesciunt nihil omnis porro quam quasi quibusdam quo ratione rem repellat sequi sunt
            voluptatum!
        </div>
        <div>Accusamus amet cumque ea earum est eum expedita in ipsum iste laboriosam, laborum magnam maiores minus
            molestias nam nisi placeat quasi quibusdam ratione rerum, similique sunt tempore temporibus veritatis,
            voluptatum.
        </div>
        <div>Beatae, blanditiis esse eveniet minus quae rem sapiente similique veritatis. Blanditiis commodi consequuntur
            dolorem explicabo quas repellat, similique tempore voluptate! Ad amet, consectetur consequuntur earum itaque
            perspiciatis quae quis vero.
        </div>
        <div>Fuga harum nostrum perferendis quisquam quo! Ab accusantium architecto beatae dignissimos eveniet
            exercitationem facere maiores quia quibusdam, sunt. Aliquam aliquid earum ex ipsam laborum reiciendis! Culpa ea
            esse id ipsam?
        </div>
        <div>Aspernatur atque consequatur delectus deleniti, dolor dolore dolorem, dolores explicabo ipsa ipsum iusto labore
            magnam maxime molestiae necessitatibus nihil nisi possimus quas qui quis sequi soluta ullam? Ex magni, nihil.
        </div>
        <div>Asperiores, delectus dignissimos possimus quia quibusdam voluptatum. Adipisci aperiam consequuntur debitis
            delectus deleniti doloremque ducimus eos exercitationem hic labore modi, natus obcaecati omnis quibusdam quo
            sapiente ullam! Consequuntur, mollitia porro!
        </div>
        <div>Doloremque error hic laborum quasi repudiandae! A aliquam assumenda dicta distinctio excepturi fuga ipsa magnam
            nulla odio odit placeat quidem quisquam quos saepe sapiente, soluta sunt totam velit vitae voluptatum?
        </div>
        <div>Ab deserunt, ea esse facere maiores omnis placeat quae sit unde voluptatem! Consequatur dicta fuga fugit minima
            nulla quidem sequi voluptas. Deleniti est illum iure laudantium numquam quaerat quas quisquam.
        </div>
        <div>Aspernatur dolorem enim esse, eum explicabo iste, itaque maxime molestias mollitia nam, non quisquam quod unde
            vel veritatis vero vitae voluptate. Aliquam, amet illo maiores quaerat quisquam saepe tempora vero.
        </div>
        <div>Animi at beatae dolorum in maiores maxime odit quaerat quisquam sed tenetur ut, voluptatum! Culpa dolor dolore
            eum incidunt magnam, molestias pariatur porro quidem rem tempora. Blanditiis doloribus dolorum nulla.
        </div>
        <div>Aperiam fuga incidunt reiciendis vero. Aliquam atque aut earum enim, esse excepturi in, mollitia optio ratione,
            reiciendis rerum sit ullam veritatis? Distinctio eius expedita impedit ipsam laudantium nemo nobis velit.
        </div>
        <div>Ad alias distinctio dolore enim esse illum impedit laudantium mollitia nobis numquam, odit officiis repellendus
            veniam. Incidunt iusto qui ullam. Aliquam beatae itaque modi nesciunt omnis, quaerat quod ratione temporibus?
        </div>
        <div>Accusantium alias aliquam aliquid deserunt dolorem, doloremque doloribus eligendi enim expedita hic ipsam
            molestias natus, numquam odit officiis quibusdam quo quos reprehenderit sequi, voluptatibus? Corporis dolor iste
            placeat tenetur voluptatum?
        </div>
        <div>Dolor doloremque ea earum enim, facere incidunt ipsa iusto labore laudantium minus officia omnis pariatur
            veniam veritatis voluptatem. Dolores hic molestiae possimus qui quidem sapiente similique sunt, tempora tempore
            totam.
        </div>
        <div>A adipisci aut fugit, nostrum porro saepe sint tempora voluptatibus. Accusantium assumenda at dolore explicabo
            ipsa labore perferendis sint velit? Inventore nihil, nisi odio quaerat quas quo recusandae sint vitae?
        </div>
        <div>A accusantium asperiores beatae deleniti deserunt eaque eligendi et eum expedita fuga id incidunt ipsa laborum
            laudantium minima modi nihil odio officiis quos reprehenderit repudiandae saepe sunt temporibus, tenetur
            voluptas.
        </div>
        <div>Accusamus aliquid aspernatur blanditiis expedita ipsum numquam pariatur, praesentium quia ratione sapiente
            temporibus totam. Aut autem cumque deleniti ea, et harum ipsa iusto maxime nostrum nulla optio provident quia,
            voluptate.
        </div>
        <div>Accusamus aliquam deserunt doloribus ex ipsum laborum laudantium, nobis nostrum, obcaecati provident quam sed
            sunt suscipit vel voluptates! Ab assumenda dolorem eos ipsa iure minima modi odio, ratione tenetur velit!
        </div>
        <div>Ad alias aliquam architecto, commodi delectus dicta dolor earum esse est eveniet facere fugiat itaque magni
            necessitatibus nesciunt nisi numquam porro quis, quod sunt totam ullam, veritatis vero vitae voluptatem.
        </div>
        <div>Libero odio quibusdam quis repellendus sequi sunt ut veritatis. Ab ad, culpa cumque, distinctio eaque est ex
            exercitationem iste modi nulla obcaecati officia quasi quibusdam repellendus repudiandae tenetur veniam? Magnam!
        </div>
        <div>A aperiam asperiores atque, dolorum ducimus eligendi error excepturi fugiat illo ipsam minus nisi nobis nostrum
            numquam perspiciatis quam qui, quisquam sed sint sunt totam unde ut vel voluptate, voluptatem?
        </div>
        <div>Aliquam animi aperiam aut autem consequatur deserunt dolore doloribus earum eveniet ex in laudantium modi natus
            necessitatibus nostrum nulla odit optio perspiciatis quam quo quod repudiandae saepe suscipit, veritatis
            voluptatibus?
        </div>
        <div>Ab cupiditate debitis est expedita facilis maiores minima minus nostrum praesentium quaerat quia, reprehenderit
            sint totam ut voluptatem. Aperiam blanditiis, debitis eos exercitationem ipsa ipsum porro recusandae rerum
            veniam voluptatum?
        </div>
        <div>Cumque dolorum explicabo facere id molestias nemo, numquam quia. Atque delectus dicta dolor id iusto magnam
            molestias pariatur perferendis quaerat, quibusdam quidem repudiandae temporibus, totam veniam veritatis
            voluptate voluptatem! Voluptatum?
        </div>
        <div>Accusamus, adipisci aperiam blanditiis harum modi molestias quibusdam suscipit! A alias architecto distinctio
            enim, eum eveniet facere fugit ipsam laborum maiores neque pariatur quibusdam quidem quis sint sit vitae
            voluptatibus.
        </div>
        <div>Est eum odio provident quibusdam repellat saepe sapiente. A architecto cupiditate delectus deserunt, fuga illum
            minus neque nesciunt nisi quaerat quasi similique tempora ullam vero voluptates. Itaque iusto molestiae sit.
        </div>
        <div>Animi asperiores cum dolor facere illum laudantium necessitatibus quaerat sint voluptas, voluptatibus! Alias,
            at debitis dignissimos earum expedita harum illo, iusto, laboriosam provident quisquam soluta veritatis vitae
            voluptatum! Nemo, sapiente.
        </div>
        <div>Ab consectetur fugit hic itaque, iure magni nobis nostrum nulla numquam odio omnis, perferendis quia quidem
            quod ratione sint tempore unde? Adipisci commodi error nam, necessitatibus perspiciatis quisquam quo sequi.
        </div>
        <div>Aspernatur, blanditiis dolorum! Cupiditate et fuga itaque nemo nostrum perspiciatis recusandae repudiandae
            sapiente velit. Amet aperiam assumenda, aut dolorum ducimus esse illo, iusto molestiae neque omnis quo
            reprehenderit soluta voluptatem?
        </div>
        <div>Atque beatae cum debitis necessitatibus sint, vero! Cupiditate deleniti dolorum eaque expedita facilis neque
            nobis quis, quod ratione repellendus repudiandae sunt ullam velit. Eaque, excepturi impedit maiores quasi qui
            unde!
        </div>
        <div>Aliquid asperiores blanditiis eum labore nesciunt numquam placeat provident quaerat rem repellat! Adipisci
            atque quaerat velit? Animi culpa est molestiae non numquam officia sit. Eligendi est id maiores saepe sunt?
        </div>
        <div>Ab ad assumenda autem consequuntur, cupiditate dolor doloremque error eveniet exercitationem impedit laboriosam
            magni non, numquam placeat quae quisquam quod quos saepe sequi similique soluta tempore ullam ut vel velit!
        </div>
        <div>Assumenda at corporis distinctio dolor et laborum modi molestias. Accusamus aliquam consectetur deserunt earum
            eius enim, explicabo inventore labore laborum magni maxime molestias recusandae sequi sunt vitae voluptate
            voluptatibus! Praesentium!
        </div>
        <div>Et minima molestiae necessitatibus similique. Aliquid at deleniti dolore doloremque dolores fuga hic nihil
            sequi similique voluptas. Cupiditate, dicta, doloribus enim iusto, laboriosam nemo perferendis ratione rem
            repellendus vel voluptates.
        </div>
        <div>Aliquid autem debitis enim ipsa minima odit officia tempora, ut. Accusamus ad consequatur distinctio doloremque
            ea eligendi eveniet, id illum impedit magnam maiores modi nobis praesentium rerum sed sequi soluta!
        </div>
        <div>Accusantium, architecto debitis delectus earum eos et, facere hic illum nesciunt nisi porro, praesentium quas
            quasi ratione sequi voluptatem voluptates. Aliquid ducimus enim, fugit libero officia quae soluta voluptate
            voluptatibus.
        </div>
        <div>Blanditiis consectetur, cum debitis, dolore dolorum incidunt labore maiores minima nemo placeat provident quia
            quod unde veritatis vero! Assumenda corporis inventore non quas tempore. Aut harum illum impedit nostrum sit.
        </div>
        <div>Aliquid aperiam blanditiis cupiditate eum numquam perferendis quam reiciendis? Beatae consequuntur culpa
            cupiditate delectus fugiat maxime minus, obcaecati porro quam voluptatibus. Eaque impedit neque, non quasi quod
            quos sint ut.
        </div>
        <div>Ad deleniti facilis, laudantium libero minima quasi tenetur totam vel! A ad adipisci animi deserunt, dolorem
            illo itaque magnam maiores molestias nam perferendis placeat sed! Accusantium harum in libero nisi.
        </div>
        <div>Animi assumenda aut beatae commodi distinctio dolorem, eligendi ex illo ipsa iste magnam natus neque
            perferendis quae, qui quod recusandae sit soluta unde veniam? Blanditiis ducimus neque nobis odit quis.
        </div>
        <div>Ad alias, amet earum eius ex fuga ipsa, iste nam nesciunt omnis quo quod voluptatum. Accusantium distinctio
            doloribus eligendi facere hic ipsa maxime recusandae soluta sunt voluptatibus. Necessitatibus neque, voluptatum!
        </div>
        <div>Ab accusantium amet animi atque consequuntur dignissimos dolorum eos esse expedita impedit ipsum molestiae nemo
            nostrum numquam odit officiis possimus quibusdam quidem quo quod repellendus sed, sequi sit sunt tenetur.
        </div>
        <div>Aut deserunt, dignissimos, dolorem eum ipsa ipsum nam perspiciatis porro praesentium quae, qui tempore
            voluptate. Animi consequuntur eaque eum excepturi id, illum iusto minima necessitatibus nobis omnis pariatur,
            vel veritatis.
        </div>
        <div>Adipisci alias aliquam aperiam commodi consequatur distinctio dolor, esse eveniet expedita libero maxime, nam
            nihil quidem quos repellendus. Doloremque doloribus inventore molestiae neque, non optio possimus quidem
            temporibus totam veniam!
        </div>
        <div>Adipisci amet animi dolore eum incidunt ipsam iure iusto labore libero molestiae molestias mollitia nisi, non
            pariatur porro quam quasi tempora. Assumenda ex incidunt iste officiis, reiciendis unde velit voluptas.
        </div>
        <div>Adipisci animi, aspernatur cumque delectus deleniti, dolorum eaque enim excepturi inventore magni nobis nostrum
            numquam officiis perspiciatis quos tempora velit vero voluptatum? Debitis dicta dolor doloribus, ipsa laborum
            omnis quae.
        </div>
        <div>Aliquid amet, autem cum dolore error fugit in, itaque nam nemo perspiciatis recusandae, sequi sint soluta
            temporibus voluptate! Ab accusamus architecto consequatur ea earum hic illum mollitia quibusdam reprehenderit
            vel.
        </div>
        <div>Alias corporis doloribus dolorum eligendi facere hic laboriosam maxime minima neque, odio odit pariatur
            provident quidem, quo quos sapiente, sed sit tempora vitae voluptatum! Accusamus ex hic omnis ut voluptatum.
        </div>
        <div>Ad amet animi consequuntur corporis cum deleniti dignissimos, ex excepturi expedita fugit, harum hic id labore
            maiores minima necessitatibus neque nihil numquam placeat provident quaerat sapiente unde vel vero vitae.
        </div>
        <div>Accusamus accusantium adipisci aperiam at commodi culpa distinctio eligendi fugiat illum impedit iste iure,
            laborum, minima modi mollitia natus neque nihil nulla optio quas ratione recusandae repellendus sint sunt velit!
        </div>
        <div>Accusamus ad aliquam assumenda consequatur consequuntur, doloremque eum ex excepturi ipsa itaque iusto minus
            quasi recusandae sunt vel. Assumenda cumque dolor est, fuga qui sequi sit! Consequatur dolores numquam sequi?
        </div>
        <div>Deserunt enim iste laboriosam provident, reiciendis rem suscipit! Aliquam at dicta dolores ipsa pariatur rem
            sequi! Ad dolor expedita illo minima necessitatibus nihil nostrum odio possimus quibusdam, ratione rem velit!
        </div>
        <div>Accusamus accusantium amet dolorem earum eveniet laboriosam nisi, numquam officiis omnis sapiente? Alias animi
            autem culpa doloribus eius eligendi eum impedit ipsum molestiae, molestias nisi odio recusandae suscipit tempora
            voluptas?
        </div>
        <div>Accusamus asperiores beatae consequatur cupiditate dicta dolor, ea enim esse exercitationem harum ipsam magni
            modi, natus non numquam obcaecati praesentium quae quo quos ratione sed soluta unde vero vitae voluptatibus.
        </div>
        <div>Animi corporis, est expedita hic illo nam nesciunt nisi odio quos saepe? Distinctio doloremque ducimus nostrum
            repellendus veniam. Dolorum eos eum ex ipsum iusto laboriosam officia optio quibusdam quisquam similique!
        </div>
        <div>Accusantium adipisci aliquid culpa cumque cupiditate deleniti dolor eaque est harum impedit ipsum iure magni
            nemo neque, nesciunt nihil, obcaecati quia repellat repudiandae saepe, sit tempore temporibus tenetur ullam
            velit.
        </div>
        <div>A adipisci autem, corporis delectus doloremque eos eum illum incidunt ipsa libero magni necessitatibus odit
            praesentium quae quos sint sit voluptatum? Aliquam consectetur dolore dolorum ipsam, repellat repudiandae sint
            ut!
        </div>
        <div>Aliquam ex exercitationem ipsam minima ut! Architecto autem dolor doloremque excepturi inventore iure molestias
            nemo odio perferendis perspiciatis possimus, praesentium quis ullam voluptatem voluptatum! Aut consequatur
            explicabo inventore molestias nemo!
        </div>
        <div>Accusamus assumenda at atque beatae consectetur cum dignissimos eos eveniet ipsa ipsam, laudantium nam odit
            pariatur quas recusandae rerum sed similique, tempora temporibus vero! Architecto eaque eius enim iusto
            veritatis!
        </div>
    </div>
</body>
</html>